<template>
  <div class="home">
    <div class="top">
      <img class="banner-img" alt="" src="../assets/images/banner图@2x.png" />
      <div class="text">
        <span>专业的员工雇前背景调查平台</span>
        <p>不放过风险 不错过人才</p>
        <p>帮助企业构建用人风险防火墙</p>
      </div>
      <div class="topbox">
        <div class="topboxitem" v-for="(item, index) in cardList" :key="index"
          :style="{ backgroundImage: 'url(' + item.bc + ')' }">
          <span>￥</span>
          <span style="display: inline-block; font-size: 24px">{{
            item.num
          }}</span>
          <p>{{ item.name }}</p>
          <span style="color: #999; font-size: 14px; margin-right: 15px">{{
            item.info
          }}</span><span :style="{ color: item.color }">{{ item.Compare }}</span>
        </div>
      </div>
    </div>
    <div class="chartbox">
      <div class="chartitem">
        <i class="el-icon-message-solid img"></i>
        <span>公告信息</span>
        <div class="infodiv" v-if="announcementList !== []">
          <div class="Infobox" v-for="(item, index) in announcementList" :key="index">
            <div class="infoleft" v-html="item.context"></div>
            <div class="inforight">
              <p>{{ item.createTime }}</p>
            </div>
          </div>
        </div>
        <div class="no-message" v-else>
          <img src="@/assets/default/no_message.png" />
        </div>
      </div>
      <div class="chartitem">
        <i class="el-icon-s-data img"></i>
        <span>背调订单统计</span>
        <div ref="echartsContainer" class="echarts"></div>
      </div>

    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getAnnouncement, getStoreOrder, getStoreBalance, getAllStatistics, } from "@/api/dataStatistics/dataStatistics.js";
export default {
  name: "Index",
  data() {
    return {
      startTime: this.$moment().subtract(3, 'days').format('YYYY-MM-DD'),
      endTime: this.$moment().format('YYYY-MM-DD'),
      announcementList: [],
      echarts1: null,
      cardList: [
        {
          bc: require("../assets/images/余额@2x.png"),
          name: "账户余额",
          num: "25,144",
          info: "较上月比较:",
          Compare: "15%",
          color: "#A88FFF ",
        },
        {
          bc: require("../assets/images/待授权@2x.png"),
          name: "待授权",
          num: "",
          info: "今日新增待授权人数:",
          Compare: "235",
          color: "#68A2FF",
        },
        {
          bc: require("../assets/images/调查中@2x.png"),
          name: "调查中",
          num: "",
          info: "今日新增调查中人数:",
          Compare: "235",
          color: "#5FD2EA ",
        },
        {
          bc: require("../assets/images/已出报告@2x.png"),
          name: "已出报告",
          num: "",
          info: "今日新增人数:",
          Compare: "235",
          color: "#B3A0F3 ",
        },
      ],
      xdatalist: [],
      ydatalist: [],

    };
  },
  mounted() {
    this.getannouncement()
    this.getOrderList()
    this.getmessageList()

  },
  methods: {
    initChart() {
      this.echarts1 = echarts.init(this.$refs.echartsContainer);
      this.echarts1.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xdatalist,
            // data: ['套餐1', '套餐1', '套餐1', '套餐1', '套餐1', '套餐1',],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            itemStyle: {
              color: "#535e83",
            },
            type: 'bar',
            barWidth: '50%',
            // data: [398, 420, 300, 250]
            data: this.ydatalist
          }
        ]
      });
    },
    // 获取背调订单
    getOrderList() {
      this.xdatalist = []
      this.ydatalist = []
      getStoreOrder({
        startTime: this.startTime,
        endTime: this.endTime,
      }).then(res => {
        res.data.list.forEach((item) => {
          this.xdatalist.push(this.$moment(item.orderTime).format('YYYY-MM-DD'))
          this.ydatalist.push(item.orderNum)
        })
        this.$nextTick(() => {
          this.initChart()
        })

      });
    },
    // 获取公告信息
    getannouncement() {
      getAnnouncement().then(res => {
        this.announcementList = res.data.announcement
        this.announcementList.forEach(item => {
          item.createTime = this.$moment(item.createTime).format('YYYY-MM-DD')
        })
      });
    },
    // 首页账户余额接口
    getmessageList() {
      getAllStatistics().then(res => {
        this.cardList[1].num = res.data.pendingAuthNum
        this.cardList[2].num = res.data.surveyNum
        this.cardList[3].num = res.data.completeNum
        this.cardList[1].Compare = res.data.pendingAuthNumAdd
        this.cardList[2].Compare = res.data.surveyNumAdd
        this.cardList[3].Compare = res.data.completeNumAdd
      })
      getStoreBalance().then(res => {
        this.cardList[0].num = res.data[0].storeBalance
        this.cardList[0].Compare = res.data[1].storeBalanceChange
      })
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  .top {
    width: 100%;
    position: relative;
    height: 500px;

    .text {
      position: absolute;
      top: 90px;
      left: 200px;
      color: #535e83;

      span {
        font-family: Microsoft YaHei;
        font-size: 42px;
      }

      p {
        font-size: 24px;
      }
    }
  }

  .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
  }

  .topbox {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    justify-content: center;


    .topboxitem {
      width: 350px;
      margin: 0 5px;
      height: 150px;
      background-size: cover;
      background-position: center;
      padding: 15px 40px;
      position: relative;
    }
  }

  .chartbox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 16px 18px;
    justify-content: center;


    .chartitem {
      width: calc(50% - 10px);
      margin: 5px;
      height: 400px;
      padding: 15px;
      background-color: #ffffff;
      font-size: 20px;

      .img {
        margin: 0 10px;
      }

      span {
        font-weight: 600;
      }

      .infodiv {
        width: 98%;
        height: 350px;
        overflow-y: auto;

        .infodiv>>>p {
          padding: 0;
          margin: 0;
        }

        .Infobox {

          display: flex;
          justify-content: space-between;
          margin: 10px;
          padding: 10px;
          font-size: 14px;
          background-color: #F5F6FB;
          border-radius: 10px;

          .inforight {
            width: 80px;
            margin-left: 20px;

          }

          .infoleft {
            flex: 1;
            flex-wrap: wrap;

          }
        }
      }

      .no-message {
        justify-content: center;
        align-items: center;
      }

    }
  }


}

.echarts {
  width: 100%;
  height: 350px;
}
</style>
